/**
 * jQuery插件开发方式第二种方法：
 * $.fn()向jQuery对象添加新的方法,$.fn等同于$.prototype,所以fn上的属性和方法对每一个jQuery实例有效
 **/
//jQuery.fn = jQuery.prototype = {
//    init: function (selector, context) {
//        //...
//    }
//};

//创建一个将页面所有链接颜色变为红色
/*$.fn.myPlugin= function () {
 //this这里指的是用jQuery选中的元素
 this.css('color','red');
 return this.each(function () {
 $(this).append(''+$(this).attr('href'))
 })
 }*/


//比如不想让页面链接只变为红色，让插件的使用者自定义颜色,默认为红色
//注意：$.extend里的defaults会被使用者传入进来的值改变
(function ($) {
 /*   $.fn.myPlugin = function (options) {
        var defaults = {
            'color'   : 'red',
            'fontSize': '12'
        };
        // 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
        var settings = $.extend({}, defaults, options)  //将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
        return this.css({
            'color'   : settings.color,
            'fontSize': settings.fontSize
        });
    }*/


//面向对象的插件开发
//定义Beautifier构造函数
    var Beautifier = function (ele, opt) {
        this.$element = ele;
        this.defaults = {
            'color'   : 'red',
            'fontSize': '12'
        };
        this.options = $.extend({}, this.defaults, opt);

    }
//定义Beautifier方法
    Beautifier.prototype = {
        beautifier: function () {
            return $.elements.css({
                'color'   : this.options.color,
                'fontSize': this.options.fontSize
            });
        }
    }
//在插件中使用Beautifier对象
    $.fn.myPlugin = function (options) {
        //创建Beautifier实例
        var beautifier = new Beautifier(this, options);
        console.log(beautifier);
        return beautifier.beautifier();
    }
})(jQuery)
